<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('安全设置')">

</head>

<body>

<div id="app">
    <div th:replace="head :: header"></div>

    <div class="user_container clearfix">

        <div th:replace="content/personal/left :: body"></div>

        <!-- 右侧内容 -->
        <div class="right_boxwrap">
            <div class="user_right_box">
                <div class="user_right_box_title" style="margin-bottom: 160px;">
                    <div class="user_right_box_title_l">
                        <em></em>
                        <h3>安全设置</h3>
                    </div>
                </div>
                <div class="user_info">
                    <div class="middle_box security_box">
                        <div class="middle_box_con" style="margin-top:0;">
                            <div class="table">
                                <div class="left">
                                    手机号：
                                </div>
                                <div class="center">
                                    <input type="text" name="" th:value="${currentUser.mobile}" placeholder="" readonly/>
                                </div>
                                <div class="right" style="display: inline-block;">
                                    <a th:href="@{/personal/safe/mobile}">更改</a>
                                </div>
                            </div>
                            <div class="table">
                                <div class="left">
                                    密 &nbsp;&nbsp;&nbsp;码：
                                </div>
                                <div class="center">
                                    <input type="password" name="" value="******" placeholder="" readonly/>
                                </div>
                                <div class="right" style="display: inline-block;">
                                    <a th:href="@{/personal/safe/password}">更改</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <el-dialog
                            title=""
                            :visible.sync="centerDialogVisible"
                            width="30%"
                            center>
                        <span>确定要解除绑定吗?</span>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="unbind">解除</el-button>
                          </span>
                    </el-dialog>

                    <!-- 底部第三方平台绑定 -->
                    <div class="security_bottom">
                        <dl th:class="${QQ ne null ? '' : 'on'}">
                            <dt>
                                <i class="iconfont icon-qq"></i>
                            </dt>
                            <dd>
                                <p th:text="${QQ ne null ? QQ.name : '未绑定'}">未绑定</p>
                                <a th:if="${QQ eq null}" th:href="@{/thirdpart/qq}">去绑定</a>
                                <a th:if="${QQ ne null}" @click="centerDialogVisible = true; bindUrl = '/thirdpart/relieve/QQ';">解绑</a>
                            </dd>
                        </dl>
                        <dl th:class="${WECHAT ne null ? '' : 'on'}">
                            <dt>
                                <i class="iconfont icon-weixin"></i>
                            </dt>
                            <dd>
                                <p th:text="${WECHAT ne null ? WECHAT.name : '未绑定'}"></p>
                                <a th:if="${WECHAT eq null}" th:href="@{/thirdpart/wechat}">去绑定</a>
                                <a th:if="${WECHAT ne null}" @click="centerDialogVisible = true; bindUrl = '/thirdpart/relieve/WECHAT';">解绑</a>
                            </dd>
                        </dl>
                        <dl th:class="${SINAWEIBO ne null ? '' : 'on'}">
                            <dt>
                                <i class="iconfont icon-tubiao214"></i>
                            </dt>
                            <dd>
                                <p th:text="${SINAWEIBO ne null ? SINAWEIBO.name : '未绑定'}">未绑定</p>
                                <a th:if="${SINAWEIBO eq null}" th:href="@{/thirdpart/sinaweibo}">去绑定</a>
                                <a th:if="${SINAWEIBO ne null}"
                                   @click="centerDialogVisible = true; bindUrl = '/thirdpart/relieve/SINAWEIBO';">解绑</a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="foot :: body"></div>

</body>

<script th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}" type="text/javascript" charset="utf-8"></script>

<script th:inline="javascript">
    activeLeft('personal-safe');

    new Vue({
        el: '#app',
        data: {
            centerDialogVisible: false,
            bindUrl: ''
        },
        methods: {
            unbind: function() {
                this.centerDialogVisible = false;
                window.location.href = this.bindUrl;
            }
        }
    })
</script>

</html>
